<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<link rel="stylesheet" type="text/css" href="<c:url value='/css/style.css'/>" />
<link rel="stylesheet" type="text/css" href="<c:url value='/css/classUploadStudent.css'/>" />
<script src="<c:url value='/js/lib.js'/>" type="text/javascript" charset="utf-8"></script>

    
<div class="row">
	
	<div class="col-md-1"></div>
	
	<div class="col-md-10">
		<div class="row">
			<!--用户操作流程 -->
			<div class="col-md-12">
				<ul class="nav nav-pills nav-justified step step-arrow">
					<li>
						<a>查看名单格式</a>
					</li>
					<li>
						<a>上传学生名单</a>
					</li>
					<li>
						<a>确定名单无误</a>
					</li>
				</ul>
			</div>
			
			<div class="col-md-12">
				<!--第一步：提示用户导入名单格式 -->
				<div id="prompt">
					<div class="row">
						<div class="col-md-12">
							<h3>上传学生名单格式如下：</h3>
						</div>
						<div class="col-md-12">
							<img src="<c:url value='/image/upload-example.png'/>">
						</div>
						<div class="col-md-12 next-step-btn">
							<input type="button" class="btn btn-primary" id="prompt-btn" value="下一步">
						</div>
					</div>
					
				</div>
				<!--第二步：用户上传学生名单 -->
				<div id="upload">
				
					<div class="row">
						<div class="col-md-12">
							<h3>上传学生名单：</h3>
						</div>
						<div class="col-md-12">
							<input type="file" id="file" name="file" style="display:none;">
							<div class="row">
								<div class="col-md-3"></div>
								<div class="col-md-6">
									<div id="upload-box">
										<div class="col-md-12">
											<img src="<c:url value='/image/upload-file.png'/>">
										</div>
										<div class="col-md-12">
											<h4>Click on this box</h4><h5>or</h5>
										</div>
										<div class="col-md-12">
											<input type="button" id="choose-file-btn" value="选择文件">
										</div>
									</div>
								</div>
								<div class="col-md-3"></div>
							</div>
						</div>
						<div class="col-md-12 next-step-btn">
							<input type="button" class="btn btn-primary" id="upload-btn" value="上一步">
						</div>
					</div>
					
				</div>
				<!--第三步：回显学生名单，用户确定 -->
				<div id="determine">
					<div class="row">
						<div class="col-md-12">
							<h3>上传学生名单如下,请确认是否无误：</h3>
						</div>
						<div class="col-md-12">
							<table class="table table-hover">
								<thead>
									<tr>
										<th class="col1">班级</th>
										<th class="col2">学号</th>
										<th class="col3">姓名</th>
									</tr>
								</thead>
								<tbody id="fileStudentList">
									
								</tbody>
							</table>
						</div>
						<div class="col-md-12 next-step-btn">
							<input type="button" class="btn btn-primary" id="determine-btn" value="确定">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>


<script>
var confirmList=[];
	$(function() {
		bsStep(1);
		$("#upload").hide();
		$("#determine").hide();
		$("#prompt-btn").click(function() {
			bsStep(2);
			$("#prompt").hide();
			$("#upload").show();
			$("#determine").hide();
		});
		
		$("#upload-btn").click(function() {
			bsStep(1);
			$("#prompt").show();
			$("#upload").hide();
			$("#determine").hide();
		});
		
		$("#upload-box").click(function() {
			$("#file").click();
		});
		
		$("#file").change(function() {
			ajaxFileUpload();
		});
		
		$("#determine-btn").click(function() {
			if(confirmList.length<=0){
				alert("当前无学生!");
				return ;
			}
			var json={
					classId:data.data.classView.id,
			    	list:confirmList
			};
			$.post(CONTEXT_PATH+"cscontrol/ajaxBatchCreateClass", {
				data : JSON.stringify(json)
			}, function(data) {
				if (data.status == "success") {
					layer.confirm('请添加学生到小班中，否则无法分配个人任务！', {
						 btn: ['我知道了'] //按钮
					}, function(){
						window.location.reload();
					});
					
				} else {
					alert(data.message);
				}
			});
		});
	})

	function ajaxFileUpload() {
		$.ajaxFileUpload({
			url :CONTEXT_PATH+"resource/upload", //用于文件上传的服务器端请求地址
			secureuri : false, //是否需要安全协议，一般设置为false
			fileElementId : 'file', //文件上传域的ID
			dataType : 'json', //返回值类型 一般设置为json
			success : function(data, status) //服务器成功响应处理函数
			{
				if(data.status=="success"){
					uploadKey(data.data.key);
				}else{
					alert(data.message);
				}
			},
			error : function(data, status, e)//服务器响应失败处理函数
			{
				alert(e);
			}
		})
		return false;
	}
	//
var uploadKey = function(key) {
	var json = {
		key:key,
		classId:data.data.classView.id
	};
	
	$.post(CONTEXT_PATH+"cscontrol/parseExcel", {
		data : JSON.stringify(json)
	}, function(data) {
		if (data.status == "success") {
			confirmList=data.data.list;
			confirm(data.data.list)
			confireList();
		} else {
			alert(data.message);
		}
	});
}

var confireList=function() {
	bsStep(3);
	$("#prompt").hide();
	$("#upload").hide();
	$("#determine").show();
}
	
var confirm = function(list){
	var fileStudentList = $("#fileStudentList");
	fileStudentList.empty();
	for(var i=0;i<list.length;i++){
		var item =list[i];
		var s="<tr>";
		s+="<td class=\"col1\">"+item.classNumber+"</td>";
		s+="<td class=\"col2\">"+item.studentCode+"</td>";
		s+="<td class=\"col3\">"+item.name+"</td>";
		s+="</tr>";
		fileStudentList.append(s);
	}
}
</script>